<template>
	<view class="user-chat-list-content">
		<view v-if="item.gstime" class="user-chat-time uflex-a-j_c">{{ item.gstime }}</view>
		<view class="user-chat-list uflex-j_fs" :class="{ ' user-chat-me': item.isme }">
			<image v-if="!item.isme" :src="item.userpic" mode="widthFix" lazy-load></image>
			<view class="user-chat-list-body">
				<!-- 文字 -->
				<text v-if="item.type === 'text'">{{ item.data }}</text>
				<!-- 图片 -->
				<image v-if="item.type === 'img'" :src="item.data" mode="widthFix" lazy-load></image>
			</view>
			<image v-if="item.isme" :src="item.userpic" mode="widthFix" lazy-load></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item: Object,
			index:Number
		}
	}
</script>

<style scoped lang="scss">
	.user-chat-list-content{
		padding: 10upx 0;
		.user-chat-list {
			padding: 0 20upx;
			> image {
				width: 100upx;
				height: 100upx;
				border-radius: 100%;
				flex-shrink: 0;
			}
			.user-chat-list-body {
				margin-right: 100upx;
				background-color: #f4f4f4;
				position: relative;
				padding: 25upx;
				margin-left: 20upx;
				border-radius: 20upx;
				> image {
					max-width: 150upx;
					max-width: 200upx;
				}
				&:after {
					position: absolute;
					left: -30upx;
					right: 0;
					top: 30upx;
					content: '';
					width: 0;
					height: 0;
					border: 16upx solid #f4f4f4;
					border-color: transparent #f4f4f4 transparent transparent;
				}
			}
		}
		.user-chat-me {
			justify-content: flex-end;
			.user-chat-list-body {
				margin-left: 100upx;
				margin-right: 20upx;
				&:after {
					left: auto;
					right: -30upx;
					border-color: transparent transparent transparent #f4f4f4;
				}
			}
		}
		.user-chat-time {
			padding: 50upx 0;
			color: #a2a2a2;
			font-size: 20upx;
		}
	}
</style>
